<template>
  <div>

    <div class="ft" >作业

    </div>

    <div class="cho">
      <el-cascader
        v-model="value"
        :options="options"
        @change="handleChange"></el-cascader>
    </div>
    <el-row style="height: 840px;
    marginTop: 150px;marginLeft: 150px;text-align: left">
      <div style="margin-top: -100px">
        <img src="../../assets/course.jpg" height="500" width="500" />
      </div>
      <div style="width: 50%;height: 30%">
        <h1>问题题目</h1>
        <p>问题详情：。。。。。。。。。。。。。。。。。。</p>
        <p></p>
      </div>
      <div >
        <p></p>
        <el-button type="primary">下载附件</el-button>
      </div>
      <div style="margin: 20px 0;"></div>
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="textarea"
        maxlength="50"
        show-word-limit
      >
      </el-input>
      <div style="margin: 20px 0;"></div>
      <el-button type="primary">上传附件</el-button>
      <el-button type="primary">提交</el-button>

    </el-row>

  </div>
</template>

<img src="../../assets/czxt.jpg" height="375" width="500"/>
<script>
    export default {
        name: 'CourseDetails',
        data () {
            return {
                text: '',
                textarea: '',
                books: [
                    {
                        cover: 'http://img5.imgtn.bdimg.com/it/u=1089883808,4262741989&fm=11&gp=0.jpg',
                        title: '第一章',
                        author: '1.1 课程名',
                        date: '2019-05-05',
                        press: '主讲老师',
                        abs: '第一章 1.1 课程名 主要内容：xxxxxxxxxxxxxxxxxxxxxxx',
                        plan: '成绩:100'
                    },
                    {
                        cover: 'http://img5.imgtn.bdimg.com/it/u=1089883808,4262741989&fm=11&gp=0.jpg',
                        title: '第一章',
                        author: '1.2 课程名',
                        date: '2019-05-05',
                        press: '主讲老师',
                        abs: '第一章 1.2 课程名 主要内容：xxxxxxxxxxxxxxxxxxxxxxx',
                        plan: '成绩:80'
                    },
                    {
                        cover: 'http://img5.imgtn.bdimg.com/it/u=1089883808,4262741989&fm=11&gp=0.jpg',
                        title: '第一章',
                        author: '1.3 课程名',
                        date: '2019-05-05',
                        press: '主讲老师',
                        abs: '第一章 1.3 课程名 主要内容：xxxxxxxxxxxxxxxxxxxxxxx',
                        plan: '已提交等待批改'
                    },
                    {
                        cover: 'http://img5.imgtn.bdimg.com/it/u=1089883808,4262741989&fm=11&gp=0.jpg',
                        title: '第一章',
                        author: '1.4 课程名',
                        date: '2019-05-05',
                        press: '主讲老师',
                        abs: '作业详情：xxxxxxxxxxxxxxxxxxxxxxx',
                        plan: '已提交等待批改'
                    },
                    {
                        cover: 'http://img5.imgtn.bdimg.com/it/u=1089883808,4262741989&fm=11&gp=0.jpg',
                        title: '第一章',
                        author: '1.5 课程名',
                        date: '2019-05-05',
                        press: '主讲老师',
                        abs: '第一章 1.5 课程名 主要内容：xxxxxxxxxxxxxxxxxxxxxxx',
                        plan: '未提交'
                    },
                    {
                        cover: 'http://img5.imgtn.bdimg.com/it/u=1089883808,4262741989&fm=11&gp=0.jpg',
                        title: '第一章',
                        author: '1.6 课程名',
                        date: '2019-05-05',
                        press: '主讲老师',
                        abs: '第一章 1.6 课程名 主要内容：xxxxxxxxxxxxxxxxxxxxxxx',
                        plan: '未提交'
                    }
                ],
                options: [{
                    value: '111',
                    label: '第一章',
                    children: [{
                        value: '1.1',
                        label: '第一节',
                    }, {
                        value: '1.2',
                        label: '第二节'
                    }, {
                        value: '1.3',
                        label: '第三节'
                    }, {
                        value: '1.4',
                        label: '第四节'
                    }, {
                        value: '1.5',
                        label: '第五节'
                    }, {
                        value: '1.6',
                        label: '第六节'
                    }]
                },  {
                    value: '222',
                    label: '第二章',
                    children: [{
                        value: '2.1',
                        label: '第一节'
                    }, {
                        value: '2.2',
                        label: '第二节'
                    }, {
                        value: '2.3',
                        label: '第三节'
                    }]
                }]
            };
        },


    }
</script>

<style scoped>
  .cover {
    width: 200px;
    height: 150px;
    margin-bottom: 7px;
    overflow: hidden;
    cursor: pointer;
  }

  img {
    width: 400px;
    height: 300px;
    padding-bottom: 200px;
    float: right;
    /*margin: 0 auto;*/
  }

  .title {
    font-size: 14px;
    text-align: left;
  }

  .author {
    color: #333;
    width: 90px;
    font-size: 13px;
    margin-bottom: 6px;
    text-align: left;
  }
  .plan {
    color: #dd6161;
    width: 100%;
    font-size: 13px;
    margin-bottom: 6px;
    text-align: right;
  }

  .abstract {
    display: block;
    line-height: 17px;
  }

  a {
    text-decoration: none;
  }

  a:link, a:visited, a:focus {
    color: #3377aa;
  }

  .ft{
    font-size: 40px;
    padding-right:800px;
  }
  .cho{
    padding-right:100px ;
  }
</style>
